<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index"
      class="tab-item"
      @click="switchTab(item)"
    >
      <image 
        :src="currentPage === item.pagePath ? item.selectedIconPath : item.iconPath" 
        class="tab-icon"
      />
      <text class="tab-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: String
  },
  computed: {
    tabList() {
      return [
        {
          pagePath: "pages/Home/index",
          iconPath: "/static/tabarImg/shouye.png",
          selectedIconPath: "/static/tabarImg/shouyec.png",
          text: this.$t('TabBar.home') // 首页
        },
		{
		  pagePath: "pages/DigAMine/index",
		  iconPath: "/static/tabarImg/wak.png",
		  selectedIconPath: "/static/tabarImg/wakc.png",
		  text: this.$t('TabBar.mining') // 挖矿
		},
		{
		  pagePath: "pages/MinePool/index",
		  iconPath: "/static/tabarImg/kuangc.png",
		  selectedIconPath: "/static/tabarImg/kuangcc.png",
		  text: this.$t('TabBar.pool') // 矿池
		},
        {
          pagePath: "pages/My/index",
          iconPath: "/static/tabarImg/my.png",
          selectedIconPath: "/static/tabarImg/myc.png",
          text: this.$t('TabBar.me') // 我的
        }
      ]
    }
  },
  methods: {
    switchTab(item) {
      uni.switchTab({
        url: '/' + item.pagePath
      })
    }
  }
}
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  background-color: #fff;
  box-shadow: 0 -1px 6px rgba(0,0,0,0.1);
  z-index: 999;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-icon {
  width: 24px;
  height: 24px;
}
.tab-text {
  font-size: 10px;
  margin-top: 4px;
}
</style>